{extend name="index/base" /}

{block name='init_var'}
{php}
$platform_tags_where = [];
$platform_tags_where[] = ['status','=',1];
if(!empty(input('tag_id'))){
    $platform_tags_where[] = ['id','=',input('tag_id')];
}
if(!empty(input('flag'))){
    $platform_tags_where[] = ['flag','=',input('flag')];
}
$platform_tags_info = \think\facade\Db::table('platform_tags')->where( $platform_tags_where)->find();
{/php}
{/block}


{block name='title'}{:empty($platform_tags_info['meta_title'])?'Product Lists':$platform_tags_info['meta_title']}{/block}
{block name='platform_description'}{:empty($platform_tags_info['meta_desc']) ? \\app\\common\\model\\SysSettingModel::getContent('normal','platform_description') : $platform_tags_info['meta_desc']}{/block}
{block name='platform_keywords'}{:empty($platform_tags_info['meta_key']) ? \\app\\common\\model\\SysSettingModel::getContent('normal','platform_keyword') : $platform_tags_info['meta_key']}{/block}




{block name='content'}
<div class="category-body">
    <div class="container my-5">
        <!-- 广告位1 -->
        <div class="ad_top_box bg-dark">
            <div class="open_show_box mb-5">
                <a href="" class="img_mark_link">
                    <img src="/assets/images/img_mark3.png" alt="" class="img_mark"
                         style="width: 100%; display: block; height: 100%;">
                </a>
            </div>
        </div>
        <div class="category-top-summary clearfix">
            <div class="category-result-summary fl">
                <h4>Products</h4>
            </div>

            <div class="category-top-sort fr">
                <label class="" for="sorting">Sort by:</label>
                <select class="form-select" v-model="listQuery.check_order_field" id="sorting" @change="getData(true)">
                    <option value="">Popularity</option>
                    <option value="price-low">Low - Hight Price</option>
                    <option value="price-high">High - Low Price</option>
                    <!--<option>Average Rating</option>
                    <option>A - Z Order</option>
                    <option>Z - A Order</option>-->
                </select>
            </div>
        </div>
        <div class="category-goods-content">
            <!-- Sidebar-->
            <aside class="asideBar">
                <!-- Sidebar-->
                <section class="catewrap">
                    <div class="cate-title">Categories</div>
                    <div class="catelist category-list-wrapper">
                        <ul>
                            {volist name="\app\common\model\GoodsAttrsModel::getSelectList(['status'=>1,'level'=>2])" id="vo"}
                            <li>
                                <div class="menu" :class="{'on':filterList.hasOwnProperty('goods_attr_{$vo['id']}')}">
                                    <a href="javascript:;" @click="handleSearchCond('{$vo['id']}','{$vo['name']}','goods_attr','{$vo['url']}')">{$vo['name']} </a>

                                    <i class="triangle" :class="showMore == '{$vo['id']}'?'on':''" @click="handleMore('{$vo['id']}')" ></i>
                                </div>
                                <div class="menuList">
                                    {volist name="vo['list']" id="child"}
                                    <dl v-show="showMore == '{$vo['id']}'">
                                        <dt>
                                            <a href="javascript:;"  :class="{'on':filterList.hasOwnProperty('goods_attr_{$child['id']}')}" @click="handleSearchCond('{$child['id']}','{$child['name']}','goods_attr','{$child['url']}')">{$child['name']} </a>

                                            <!-- <i class="triangle"></i> -->

                                        </dt>
                                        {volist name="child['list']" id="childchild"}
                                        <dd>
                                            <a href="javascript:;" :class="{'on':filterList.hasOwnProperty('goods_attr_{$childchild['id']}')}" @click="handleSearchCond('{$childchild['id']}','{$childchild['name']}','goods_attr','{$child['url']}')">{$childchild['name']} </a>
                                        </dd>
                                        {/volist}
                                    </dl>
                                    {/volist}
                                </div>
                            </li>
                            {/volist}

                        </ul>
                    </div>
                </section>
                <header class="category-selected-attr">
                    <div class="category-selected-action clearfix">
                        <div class="cate-title">Filter</div>
                        <a href="javascript:;"  class="clearAll" @click="handleSearchClear(true)">Clear All</a>
                    </div>
                    <div class="curChoice">
                        <a href="javascript:;" v-for="(item,index) in filterList" :key="index" >{{item.name}}<i class="tag_c" @click="handleSearchClear(item)"></i></a>
                    </div>
                </header>
                <section class="filterWrap">
                    <div class="colorList forList">
                        <div class="site-custom-title-5 on"><!-- <i class="triangle"></i> -->Color</div>
                        <ul class="clearfix js_list">
                            {selfTag:multiFun  funName="get_color_objects"}
                            <li class="{$vo['color']} " :class="{'on':filterList.hasOwnProperty('color_{$vo['color']}')}"  @click="handleSearchCond('{$vo['color']}','{$vo['name_en']}','color')">
                                <a class="logsss_event_cl tag_c" href="javascript:;" title="{$vo['name']}">{$vo['name_en']}</a>
                            </li>
                            {/selfTag:multiFun}
                        </ul>
                    </div>
                    <section class="filterList forList sizeList">
                        <div class="site-custom-title-5 on"><!-- <i class="triangle"></i> -->Size</div>
                        <div class="aatr_selectBox js_list">
                            <ul class="logsss_event_ps">
                                {selfTag:multiFun  funName="get_size_objects"}
                                <li class=""  :class="{'on':filterList.hasOwnProperty('size_{$vo['name']}')}"   @click="handleSearchCond('{$vo['name']}','{$vo['name']}','size')">
                                    <a class="logsss_event_cl" href="javascript:;"><i></i> {$vo['name']} </a>
                                </li>
                                {/selfTag:multiFun}
                            </ul>
                        </div>
                    </section>
                    <!--<section class="filterList forList">
                        <div class="site-custom-title-5 on"><i class="triangle"></i>Style</div>
                        <div class="aatr_selectBox js_list">
                            <ul class="logsss_event_ps">
                                {volist name="\app\common\model\GoodsAttrsModel::goodsStyleLists()" id="vo"}
                                <li class=""  :class="{'on':filterList.hasOwnProperty('style_{$vo['id']}')}"   @click="handleSearchCond('{$vo['id']}','{$vo['name']}','style')">
                                    <a class="logsss_event_cl" href="javascript:;"><i></i> {$vo['name']} ({$vo['count']}) </a>
                                </li>
                                {/volist}

                            </ul>
                        </div>
                    </section>-->
                </section>

                <section class="catewrap catewrap-price">
                    <div class="on cate-sidebar-title"><!-- <i></i> -->Price Range</div>
                    <div class="js-slideBox">
                        <div class="price-search">
                            <input type="text" class="price-input js_priceInput" v-model="listQuery.money_start" id="js_priceStart" placeholder="min">
                            <span>—</span>
                            <input type="text" class="price-input js_priceInput" v-model="listQuery.money_end" id="js_priceEnd" placeholder="max">
                            <a href="javascript:;" class="price-btn" id="js_priceSearch" rel="nofollow" @click="getData(true)">GO</a>
                        </div>
                    </div>
                </section>
            </aside>
            <!-- Content  -->
            <section class="mianBox">

                <!-- Products grid-->
                <div class="grid-products clearfix">
                    <!-- Product-->
                    <div class="row mx-n2">
                        <div class="grid-item col-md-3 col-sm-6 col-6 px-2 mb-2" v-for="(item,index) in list" :key="index">
                            <div class="grid-view_item">
                                <div class="grid-view_img">
                                    <a class="grid-view-item__link" :href="'/products?id='+item.id">
                                        <img class="grid-view-item__image primary " :src="item.cover_img" />
                                        <img class="grid-view-item__image hover " :src="item.cover_img_t" />
                                    </a>
                                    <div class="variants add">
                                        <a href="javascript:;" class="btn btn-options quickShop" @click="handleGoodsShowCart(item)">ADD TO BAG</a>
                                    </div>
                                    <div class="shopWrapper " :class="{'active':item.active_cart}">
                                        <div >
                                            <a class="btn closeShop" href="javascript:;" @click="handleGoodsHideCart(item)"><i class="ci-close text-white"></i></a>
                                            <div class="grid product-single">
                                                <div class="productWrap">
                                                    <div class="product-form quickshopForm">
                                                        <div class="swatch clearfix" v-for="(sku,sku_index) in item.sku_attr" :key="sku_index">
                                                            <div class="product-form__item">
                                                                <label class="header">{{sku.name}}: <span class="slVariant">{{item['sku_group_name']?item['sku_group_name'][sku_index]:''}}</span></label>
                                                                <div class="swatch-element" v-for="(sku_content,sku_content_index) in sku.content" :key="sku_content_index" @click="handleGoodsSkuItem(item,sku_index,sku_content.name)">
                                                                    <label class="swatchLbl color " :class="{'checked': item['sku_group_name'] && item['sku_group_name'][sku_index]==sku_content.name}" :title="sku_content.name" v-if="sku_content.img && sku_content.img.length>0" :style="'background-image:url('+sku_content.img+');'">

                                                                    </label>
                                                                    <label class="swatchLbl size " :class="{'checked': item['sku_group_name'] && item['sku_group_name'][sku_index]==sku_content.name}" :title="sku_content.name" v-else >
                                                                        {{sku_content.name}}
                                                                    </label>
                                                                </div>

                                                            </div>
                                                        </div>
                                                        <template v-if="item.sku_price.length>0">
                                                            <button class="btn quickshop-cart"  v-if="item.sold_state==1 ||  (item.sku_select_obj && item.sku_select_obj.stock>0)" @click="handleGoodsAddCart(item.id,item.sku_select_obj.id)">
                                                                <span>ADD TO BAG</span>
                                                            </button>
                                                            <button class="btn quickshop-cart" v-else>
                                                                <span>Not enough stock</span>
                                                            </button>
                                                        </template>
                                                        <template v-else>
                                                            <button class="btn quickshop-cart" v-if="item.sold_state==1 || item.stock>0" @click="handleGoodsAddCart(item.id)" >
                                                                <span>ADD TO BAG</span>
                                                            </button>
                                                            <button class="btn quickshop-cart" v-else>
                                                                <span>Not enough stock</span>
                                                            </button>
                                                        </template>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <a class="grid-view-item__title text-truncate" :href="'/products?id='+item.id">{{item.name}}</a>

                                <div class="grid-view-item__meta">
                                    <span class="shop-price">
                                        <strong class="bizhong">{$money_f_name}</strong>
                                        <strong class="my_shop_price">{$money_f}{{item.sold_price}}</strong>
                                    </span>
                                    <del class="market-price" v-show="item.og_price-0>0">
                                        <strong class="bizhong">{$money_f_name}</strong>
                                        <strong class="my_shop_price">{$money_f}{{item.og_price}}</strong>
                                    </del>
                                    {if(!empty(session('user_info.user_id')))}
                                    <span class="like-icon" :style="{backgroundPosition : item.is_coll ? '-104px -65px':'-104px -17px' }" @click="handleGoodsColl(item)"></span>
                                    {/if}
                                </div>

                                <ul class="gridSwatches">

                                    <li :class="{active:sku_img_index==item.sku_img_index}"  @click="handleSkuImg(item,sku_img,sku_img_index)"  :style="'background-image: url('+sku_img+');'" v-for="(sku_img,sku_img_index) in item.sku_attr_img" :key="sku_img_index"></li>

                                </ul>

                            </div>
                        </div>
                    </div>
                </div>

                <hr class="my-3">
                <!-- Pagination-->
                <nav class="d-flex justify-content-center pt-2" aria-label="Page navigation">
                    <el-pagination  background @current-change="handlePageChange" :page-size="listQuery.limit" @size-change="handlePageSizeChange"  layout="  prev, pager, next" :total="total"> </el-pagination>
                    <!-- <ul class="pagination">
                         <a class="page-link prev" href="#">
                             <i class="ci-arrow-left"></i>
                         </a>
                         <a class="page-link" v-for="index in total_page" href="">{{index}}</a>

                         <a class="page-link next" href="#">
                             <i class="ci-arrow-right"></i>
                         </a>
                     </ul>-->
                </nav>
            </section>
        </div>
    </div>
</div>
{/block}
{block name='script'}
<!-- Vendor scrits: js libraries and plugins-->
<script src="/assets/js/bootstrap.bundle.min.js"></script>
<script src="/assets/js/smooth-scroll.polyfills.min.js"></script>

<script src="/assets/js/swiper.min.js"></script>
<script>


    layui.extend({
        fileUpload: 'vue-components/fileUpload',
    }).use(["fileUpload"], function (fileUpload) {
        var swiper = new Swiper('.recommend-swiper .swiper-container', {
            slidesPerView: 4,
            spaceBetween: 15,
            slidesPerGroup: 4,
            loop: true,
            loopFillGroupWithBlank: true,
            breakpointsInverse: true,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });



        initVue({
            data: {

                listQuery:{
                    page:1,
                    limit:16,
                    check_order_field:'',
                    sort_gids:"{:input('sort_gids','','trim')}",
                    flag:"{:input('flag','','trim')}",
                    money_start:'',
                    money_end:'',
                    tag_id:"{:input('tag_id','','trim')}",
                    keyword:"{:input('keyword','','trim')}",
                },
                total:0,
                total_page:0,
                list:[],
                filterList:{},
                showMore:'',
            },
            components: {
                'file-upload': fileUpload
            },
            computed: {

            },
            created: function () {

            },
            mounted: function () {

                this.getData('new_in')
            },
            methods:{
                getData:function(is_reset){
                    if(is_reset===true){
                        this.listQuery.page = 1
                    }
                    var extraQuery = {}
                    for (filed in this.filterList){
                        var query_info = this.filterList[filed]
                        var query_index = query_info['cond_field']
                        var query_value = query_info['id']
                        if (!extraQuery.hasOwnProperty(query_index)){
                            extraQuery[query_index] = []
                        }
                        extraQuery[query_index].push(query_value)
                    }
                    console.log("extraQuery---",this.filterList,extraQuery)
                    var that = this
                    this.$network("goods/lists",Object.assign({},this.listQuery,extraQuery)).then(function(res){
                        var data = res.data || {}
                        that.total = data.total || 0
                        that.total_page = data.total_page || 0
                        that.list = data.list ||[]
                    })
                },
                handlePageSizeChange:function(limit){
                    this.listQuery.limit = limit
                    this.getData()
                },
                handlePageChange:function(page) {
                    this.listQuery.page = page
                    this.getData()
                },
                handleSearchClear:function(item){
                    if (item===true){
                        this.filterList = {}
                    }else{
                        var cond_key = item.cond_field+"_"+item.id
                        this.$delete(this.filterList,cond_key)
                    }
                    this.$nextTick(function(){
                        this.getData(true)
                    })
                },
                handleSearchCond:function(id,name,mode,url){
                    console.log(id,name,mode)
                    if(url && url.length>0){
                        window.location.href = url
                        return
                    }

                    var cond_key = mode+"_"+id
                    if (this.filterList.hasOwnProperty(cond_key)){
                        this.$delete(this.filterList,cond_key)
                    }else{
                        this.$set(this.filterList,cond_key,{
                            id:id,
                            name:name,
                            cond_field:mode,
                        })
                    }

                    this.$nextTick(function(){
                        this.getData(true)
                    })
                },
                handleMore:function(type){
                    if(type==this.showMore){
                        this.showMore = ""
                    }else{
                        this.showMore = type

                    }
                },
                handleSkuImg:function(item,img,index){
                    item.cover_img =img
                    item.c_cover_img =img
                    this.$set(item,'sku_img_index',index)
                }

            },
        })

    })
</script>
{/block}